import { useQuery } from "remax";
import {
  createAnimation,
  getStorageSync,
  request,
  ScrollView,
  Swiper,
  SwiperItem,
  Video,
  View,
} from "remax/wechat";
import * as React from "react";
import { usePageEvent } from "remax/macro";
import { access, origin } from "@/config/config";
import styles from "./index.css";
// import VideoSwiper from '@miniprogram-component-plus/video-swiper/miniprogram_dist'
// import { VideoSwiper } from "@/component/video-swiper";

import { Button, Cell, Col, Icon, Row } from "annar";
import Block from "@/component/block";
import { Author } from "@/type/author";
import VideoSwiper1, { videoSwpierItem } from "@/component/video-swiper1";
const prepareVideoList = [
  {
    id: "0", // 视频的id
    videoDesc: "fdadfa", // 视频描述
    likeCounts: 1, // 点赞数
    authorId: "4", // 作者id
    nickName: "sfsfsaf", // 上传用户昵称
    userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg", // 上传用户的头像图片路径
    coverPath: "", // 视频的封面图路径
    videoPath:
      "http://source.liangchao.top/video/01ba0fab-791b-41fc-b7b2-b18588652ae7.MP4", // 视频的路径
    isFollow: false, // 该用户是否关注了该视频的作者
    isLike: false, // 是否喜欢该视频
    commentNumber: 1111, // 弹幕数量
    danmuList: [
      // 弹幕列表
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 1,
        createTime: "2022-02-01 10:11:11",
      },
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 2,
        createTime: "2022-02-01 10:11:11",
      },
    ],
  },
  {
    id: "1", // 视频的id
    videoDesc: "dafdaf", // 视频描述
    likeCounts: 1, // 点赞数
    authorId: "4", // 作者id
    nickName: "fdaf", // 上传用户昵称
    userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg", // 上传用户的头像图片路径
    coverPath: "", // 视频的封面图路径
    videoPath:
      "http://source.liangchao.top/video/01ba0fab-791b-41fc-b7b2-b18588652ae7.MP4", // 视频的路径
    isFollow: false, // 该用户是否关注了该视频的作者
    isLike: false, // 是否喜欢该视频
    commentNumber: 1111, // 弹幕数量
    danmuList: [
      // 弹幕列表
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 1,
        createTime: "2022-02-01 10:11:11",
      },
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 2,
        createTime: "2022-02-01 10:11:11",
      },
    ],
  },
  {
    id: "2", // 视频的id
    videoDesc: "", // 视频描述
    likeCounts: 1, // 点赞数
    authorId: "4", // 作者id
    nickName: "", // 上传用户昵称
    userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg", // 上传用户的头像图片路径
    coverPath: "", // 视频的封面图路径
    videoPath:
      "http://source.liangchao.top/video/01ba0fab-791b-41fc-b7b2-b18588652ae7.MP4", // 视频的路径
    isFollow: false, // 该用户是否关注了该视频的作者
    isLike: false, // 是否喜欢该视频
    commentNumber: 1, // 弹幕数量
    danmuList: [
      // 弹幕列表
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 1,
        createTime: "2022-02-01 10:11:11",
      },
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 11111111,
        createTime: "2022-02-01 10:11:11",
      },
    ],
  },
  {
    id: "3", // 视频的id
    videoDesc: "", // 视频描述
    likeCounts: 1, // 点赞数
    authorId: "4", // 作者id
    nickName: "", // 上传用户昵称
    userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg", // 上传用户的头像图片路径
    coverPath: "", // 视频的封面图路径
    videoPath:
      "http://source.liangchao.top/video/01ba0fab-791b-41fc-b7b2-b18588652ae7.MP4", // 视频的路径
    isFollow: false, // 该用户是否关注了该视频的作者
    isLike: false, // 是否喜欢该视频
    commentNumber: 1, // 弹幕数量
    danmuList: [
      // 弹幕列表
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 11111111,
        createTime: "2022-02-01 10:11:11",
      },
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 11111111,
        createTime: "2022-02-01 10:11:11",
      },
    ],
  },
  {
    id: "4", // 视频的id
    videoDesc: "", // 视频描述
    likeCounts: 1, // 点赞数
    authorId: "4", // 作者id
    nickName: "", // 上传用户昵称
    userAvatar:
      "http://source.liangchao.top/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg", // 上传用户的头像图片路径
    coverPath: "", // 视频的封面图路径
    videoPath:
      "http://source.liangchao.top/video/01ba0fab-791b-41fc-b7b2-b18588652ae7.MP4", // 视频的路径
    isFollow: false, // 该用户是否关注了该视频的作者
    isLike: false, // 是否喜欢该视频
    commentNumber: 1111, // 弹幕数量
    danmuList: [
      // 弹幕列表
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 11111111,
        createTime: "2022-02-01 10:11:11",
      },
      {
        nickName: "Tom",
        userAvatar: "/img/45a44e04-ba39-402f-804e-78da272551c9.jpeg",
        text: "1111",
        color: "#fff",
        time: 11111111,
        createTime: "2022-02-01 10:11:11",
      },
    ],
  },
]; // 数据样例格式

//
// const videoList = [
//     {
//         key: '0',
//         url: `${origin}/video/snsdyvideodownload.mp4`,
//     },
//     {
//         key: '1',
//         url: `${origin}/video/snsdyvideodownload.mp4`,
//     },
//     {
//         key: '2',
//         url: `${origin}/video/snsdyvideodownload.mp4`,
//     },
//     {
//         key: '3',
//         url: `${origin}/video/snsdyvideodownload.mp4`,
//     }
// ]

const getRandomColor = () => {
  const rgb = [];
  for (let i = 0; i < 3; i++) {
    let color = Math.floor(Math.random() * 256).toString(16);
    color = color.length === 1 ? "0" + color : color;
    rgb.push(color);
  }
  return "#" + rgb.join("");
};

export default () => {
  const [videoList, setVideoList] = React.useState<videoSwpierItem[]>([]);
  // const [danmuList, setDanmuList] = React.useState<any[]>([
  //   {
  //     text: "fjai",
  //     color: getRandomColor(),
  //     time: 1,
  //   },
  //   {
  //     text: "fjai",
  //     color: getRandomColor(),
  //     time: 2,
  //   },
  // ]);
  // const [author, setAuthor] = React.useState({
  //   id: "0",
  //   nickName: "",
  //   avatar: "",
  // });
  // const [currentTime, setCurrentTume] = React.useState<number>(0);
  // const videoPath = useQuery().videoPath;
  // const coverPath = origin + useQuery().coverPath;
  const videoId = useQuery().videoId;
  // const videoTitle = useQuery().videoTitle;
  // const [data, setData] = React.useState<string>("");
  // const videoContext = wx.createVideoContext("myVideo");
  // const [inputValue, setInputValue] = React.useState<string>("");
  // const [followBtnColor, setFollowBtnColor] = React.useState<string>("orange");
  // const [followIconColor, setFollowIconColor] = React.useState<string>("add");
  // const [followText, setFollowText] = React.useState<string>("关注");

  let loginInfo: { token: any };

  usePageEvent("onLoad", () => {
    // console.log(`${access}${videoPath}`);
    // setData(`${access}${videoPath}`);
    loginInfo = getStorageSync("loginInfo");

    request({
      url: `${origin}/video/initVideoSwiper/${videoId}`,
      header: {
        token: loginInfo.token,
        "Content-Type": "application/x-www-form-urlencoded",
        Accept: "application/json",
      },
      success: (res: any) => {
        let videoList1 = res.data.data;
        console.log("res", videoList1);
        setVideoList(videoList1);
      },
    });
  });

  React.useEffect(() => {
    console.log("fa", videoList);
  }, [videoList]);

  // const bindPlay = () => {
  //   videoContext.play();
  // };

  // const bindPause = () => {
  //   videoContext.pause();
  // };

  // const bindSendDanmu = () => {
  //   if (inputValue === "") return;
  //   let danmu = {
  //     color: getRandomColor(),
  //     text: inputValue,
  //   };
  //   videoContext.sendDanmu(danmu);
  //   setInputValue("");
  //   let temp = danmuList;
  //   let item = {
  //     text: danmu.text,
  //     color: danmu.color,
  //     time: currentTime,
  //   };
  //   temp.push(item);
  //   setDanmuList(temp);
  //   console.log(danmuList);

  //   loginInfo = getStorageSync("loginInfo");
  //   wx.request({
  //     url: `${origin}/danmu/add`,
  //     header: {
  //       token: loginInfo.token,
  //       "Content-Type": "application/x-www-form-urlencoded",
  //       Accept: "application/json",
  //     },
  //     method: "POST",
  //     data: {
  //       text: item.text,
  //       color: item.color,
  //       time: item.color,
  //       videoId: videoId,
  //     },
  //     success: (res: any) => {
  //       if (res.data.code === 200) {
  //       } else {
  //       }
  //     },
  //   });
  // };

  // const bindNext = () => {
  //   wx.request({
  //     url: `${origin}/video/random`,
  //     success: (res: any) => {
  //       console.log(res);
  //       let video = res.data.data;
  //       wx.redirectTo({
  //         url: `/pages/watch/index?videoPath=${video.videoPath}&coverPath=${video.coverPath}&videoId=${video.id}&videoTitle=${video.videoDesc}`,
  //       });
  //     },
  //   });
  // };

  // const bindFollow = () => {
  //   let isFollow: boolean = followBtnColor === "light";
  //   setFollowBtnColor(followBtnColor === "orange" ? "light" : "orange");
  //   setFollowIconColor(followIconColor === "check" ? "add" : "check");
  //   setFollowText(followText === "关注" ? "已关注" : "关注");
  //   let loginInfo = wx.getStorageSync("loginInfo");
  //   if (isFollow) {
  //     // 已经关注了取消关注
  //     wx.request({
  //       url: `${origin}/follow/undo/${author.id}`,
  //       header: {
  //         token: loginInfo.token,
  //       },
  //       success: (res: any) => {
  //         console.log(res.data.data);
  //       },
  //     });
  //   } else {
  //     // 没有关注, 去关注
  //     wx.request({
  //       url: `${origin}/follow/do/${author.id}`,
  //       header: {
  //         token: loginInfo.token,
  //       },
  //       success: (res: any) => {
  //         console.log(res.data.data);
  //       },
  //     });
  //   }
  // };

  return (
    // <Block title={videoTitle}>
    //     <View className={styles.video_swiper}>
    //         {/*<VideoSwiper  videoList={videoList} />*/}
    //         {/* 展示作者头像、名字, 和一个关注按钮 */}
    //         <Row>
    //             <Col span={3}>
    //                 {/* 头像 */}
    //                 <img className={styles.avatar} alt="" width="30px" src={`${origin}${author.avatar}`} />
    //             </Col>
    //             <Col span={6}>
    //                 {/* 发布人名字 */}
    //                 <View>{author.nickName}</View>
    //             </Col>
    //             <Col offset={9} span={5}>
    //                 <Button onTap={bindFollow} shape="square" block look={followBtnColor} icon={<Icon type={followIconColor} color={followBtnColor} size="40px" />}>{followText}</Button>
    //             </Col>

    //         </Row>

    //         <Video
    //             id="myVideo"
    //             src={data}
    //             autoplay={true}
    //             danmuList={danmuList}
    //             enableDanmu={true}
    //             danmuBtn={true}
    //             enableProgressGesture={true}
    //             objectFit={"contain"}
    //             poster={coverPath}
    //             enableAutoRotation={true}
    //             style={{ width: "inherit" }}
    //             onTimeUpdate={timeUpdate}
    //         />
    //         <Cell.Input icon="people" label="弹幕内容" placeholder="发送弹幕" border={false} value={inputValue} onChange={bindChange} />
    //         <Button style={{ margin: "5px" }} onTap={bindSendDanmu} size="large" shape="square" block look="orange">发送弹幕</Button>
    //         <Button style={{ margin: "5px" }} onTap={bindPlay} size="large" shape="square" block look="secure">播放</Button>
    //         <Button style={{ margin: "5px" }} onTap={bindPause} size="large" shape="square" block look="warning">暂停</Button>
    //         <Button style={{ margin: "5px" }} onTap={bindNext} size="large" shape="square" block look="anna">下一个</Button>
    //     </View>

    // </Block>
    <VideoSwiper1 videoList={videoList} />
  );
};
